<template>
    <!-- 修改用户信息的表单界面 -->
    <div>
        <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="80px" @submit.prevent>
            <el-form-item label="头像" prop="avatarFile">
                <AvatarUpload v-model="formData.avatarFile" @avatarCover="saveCover"></AvatarUpload>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
                <el-input clearable maxlength="150" placeholder="请输入昵称" v-model="formData.nickName"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="formData.gender">
                    <el-radio :value="1">男</el-radio>
                    <el-radio :value="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="朋友权限" prop="joinType">
                <el-switch v-model="formData.joinType" active-value="JOIN_WITH_CONFIRMATION"
                    inactive-value="JOIN_DIRECTLY"></el-switch>
                <div class="info">加我为好友时{{ formData.joinType == "JOIN_DIRECTLY" ? '无需' : '需要' }}验证</div>
            </el-form-item>
            <el-form-item label="地区" prop="area">
                <AreaSelect v-model="formData.area"></AreaSelect>
            </el-form-item>
            <el-form-item label="个性签名" prop="personalSignature">
                <el-input clearable placeholder="请输入个性签名" type="textarea" :rows="5" :maxlength="30"
                    :show-word-limit="true" resize="none" v-model="formData.personalSignature"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveUserInfo">保存</el-button>
                <el-button link @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch, computed } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

/* 使用数据初始化表单 */
const props = defineProps({
    userInfo: {
        type: Object
    },
})
const formData = computed(() => {
    const userInfo = props.userInfo;
    userInfo.avatarFile = userInfo.userId
    userInfo.area = {
        areaCode: userInfo.areaCode ? userInfo.areaCode.split(",") : [],
        areaName: userInfo.areaName ? userInfo.areaName.split(",") : [],
    }
    return userInfo
})


const formDataRef = ref();
const rules = {
    avatarFile: [{ required: true, message: "请选择头像" }],
    nickName: [{ required: true, message: "请输入昵称" }],
};

/* 将子组件传递的头像图片文件和缩略图文件设置到表单中 */
const saveCover = ({ avatarFile, coverFile }) => {
    formData.value.avatarFile = avatarFile;
    formData.value.coverFile = coverFile
};

const emit = defineEmits(["editBack"]);

import { useAvatarInfoStore } from "@/stores/AvatarInfoStore";
const avatarInfoStore = useAvatarInfoStore();
import { useUserInfoStore } from "@/stores/UserInfoStore";
const userInfoStore = useUserInfoStore();

const saveUserInfo = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        let params = {};
        Object.assign(params, formData.value);
        // 请求参数是没有area的，而且需要改为逗号分割的字符串
        params.areaName = ''
        params.areaCode = ''
        if (params.avatarFile == props.userInfo.userId) {
            // 没有上传过新头像就不传这个参数
            delete params.avatarFile
        }
        if (params.area) {
            params.areaName = params.area.areaName.join(",")
            params.areaCode = params.area.areaCode.join(",")
            delete params.area
        }
        avatarInfoStore.setForceReload(userInfoStore.getUserInfo().userId, false)
        let result = await proxy.Request({
            method: "put",
            url: proxy.Api.saveUserInfo,
            params,
        });
        if (!result) {
            return;
        }
        proxy.Message.success("保存成功");
        // 触发拉取头像的事件，用于更新头像
        avatarInfoStore.setForceReload(userInfoStore.getUserInfo().userId, true)
        emit("editBack");
    });
};

const cancel = () => {
    emit("editBack");
};

import AreaSelect from "@/components/AreaSelect.vue";
</script>

<style lang="scss" scoped>
.info {
    margin-left: 5px;
    color: #949494;
    font-size: 12px;
}
</style>
